/* 
    Document   : audioplayer
    Created on : 17.9.2012, 15:06:09
    Author     : Martin Řehánek <Martin.Rehanek at mzk.cz>
    Description:
        Purpose of the stylesheet follows.
*/

.player{
    width:520px;
    /*margin-top: 50px;*/
    margin-right: 50px;
    margin-left: 80px;
    white-space: nowrap;
    padding-top: 20px;
}

.playerBody{
    width:517px;
    height: 107px;
    padding-top: 20px;
    padding-left: 20px;
    white-space: nowrap;
    background-image: url("../img/audioplayer/k4-player-body.png");
    background-repeat: no-repeat;
}


.audioButtons{
    width: 120px;
    height: 50px;
    background-repeat: no-repeat;
    vertical-align: middle;
    display: inline-block;
}

.btn {
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    vertical-align: middle;
    display: inline-block;
}


.btnPlayPrevious {
    width: 26px;
    height: 26px;
    background-image: url("../img/audioplayer/k4-player-previous.png");
}

.btnPlayPrevious:hover {
    background-image: url("../img/audioplayer/k4-player-previous-hover.png");
}

.btnPlay {
    width: 42px;
    height: 42px;
    background-image: url("../img/audioplayer/k4-player-play.png");
}

.btnPlay:hover {
    background-image: url("../img/audioplayer/k4-player-play-hover.png");
}

.btnPause {
    width: 42px;
    height: 42px;
    background-image: url("../img/audioplayer/k4-player-pause.png");
}

.btnPause:hover {
    background-image: url("../img/audioplayer/k4-player-pause-hover.png");
}

.btnPlayNext {    
    width: 26px;
    height: 26px;
    background-image: url("../img/audioplayer/k4-player-next.png");
}

.btnPlayNext:hover {    
    background-image: url("../img/audioplayer/k4-player-next-hover.png");
}

.audioDisplayPanel{
    width: 220px;
    height: 42px;
    /*height: 62px;*/
    display: inline-block; 
    background-image: url("../img/audioplayer/k4-player-display.png");
}

/* název tracku jako posunující se text */
.trackInfoContainer {
    /*display: block;*/
    width: 200px;
    height: 18px;
    background-repeat: no-repeat;
    display: inline-block; 
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    white-space: pre;
    font-family: Verdana,Arial,sans-serif;
    font-size: 0.7em;
    /*font-size: small;*/
    text-align: center;
}


/* aktuální čas v spuštěném tracku (např. 0:02/1:24)*/
.progressInfoContainer {
    width: 120px;
    font-size: small;
    display: inline-block; 
    font-family: Verdana,Arial,sans-serif;
    font-size: 0.7em;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    margin-left: 50px;
    margin-right: 10px;
}

.btnPlaylistOn{
    width: 12px;
    height: 8px;
    margin-left: 10px;
    margin-right: 10px;
    background-image: url("../img/audioplayer/k4-player-list-on.png");
}

.btnPlaylistOff{
    width: 12px;
    height: 8px;
    margin-left: 10px;
    margin-right: 10px;
    background-image: url("../img/audioplayer/k4-player-list-off.png");
}


.volumePanel{
    width: 120px;
    height: 50px;
    margin-bottom: 10px;
    background-repeat: no-repeat;
    vertical-align: middle;
    display: inline-block;
}

/* obsahuje text "Hlasitost" */
.volumeTitle{
    font-family: Verdana,Arial,sans-serif;
    font-size: 0.7em;
    padding-left: 40px;
    padding-right: 30px;
}

.btnMuteOn{
    width: 19px;
    height: 15px;
    background-image: url("../img/audioplayer/k4-player-mute-on.png");
}

.btnMuteOff{
    width: 19px;
    height: 15px;
    background-image: url("../img/audioplayer/k4-player-mute-off.png");
}

/* nastavení hlasitosti*/
.volumeSliderContainer {
    height: 7px;
    width: 84px;
    vertical-align: middle;
    /*display: inline-block;*/
    /*width: 300px;*/
    /*    height: 20px;
        width: 200px;*/
    /*top: 40px;*/
    /*background-color: greenyellow;*/
    /*position: relative;*/
    display:inline-block;
    /*background-repeat: no-repeat;*/

    /*display: inline-block;*/
    /*visibility: visible;*/
    /*position: absolute; top: 228px; left: 481px;*/
    /*z-index: 2;*/
}

.volumeSliderContainer .goog-slider-horizontal{
    height: 7px;
    width: 84px;
    background-image: url("../img/audioplayer/k4-player-volume.png");

    /*display: block;*/
    /*background-color: #ea7d0b;*/
    /*width: 100%;*/
    /*height: 20px;*/    
    position: relative;
    /*position: absolute;*/
    /*overflow: hidden;*/
    /*    -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        -khtml-border-radius: 20px;
        border-radius: 20px;*/
}

.volumeSliderContainer .goog-slider-horizontal .goog-slider-thumb {
    background-image: url("../img/audioplayer/k4-player-volume-drager.png");

    /*left: 100px !important;*/
    width: 18px;
    /*height: 100%;*/
    height: 18px;

    /*    width: 18px;
        height: 18px;*/
    /*width: 100%;*/
    /*height: 100%;*/
    position: relative;
    /*vertical-align: central;*/
    /*background-color: #000;*/
    /*overflow: visible;*/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

.volumeSliderSpan .goog-slider-horizontal .goog-slider-thumb:hover {
    background-image: url("../img/audioplayer/k4-player-volume-drager-hover.png");
}


/*POTUD AKTUALIZOVANO*/


/* průběh přehrávání - timeline*/
.timelineContainer {
    /*height: 64px;*/
    /*width: 400px;*/
    background-repeat: no-repeat;
    vertical-align: middle;
    display: inline-block;
    width: 400px;
    /*width: 300px;*/
}



/*.goog-slider-vertical,
.goog-slider-horizontal {
    background-color: ThreeDFace;
    position: relative;
    overflow: hidden;
}*/

/*.goog-slider-thumb {
    position: absolute;
    background-color: ThreeDShadow;
    overflow: hidden;
}*/


/*/.goog-slider-horizontal*/ 
.goog-slider-thumb {
    left: 100px 
        /*!important;*/
        /*    height: 20px;
            width: 100%;*/
}

.goog-slider-thumb {
    cursor:pointer;
}


.timelineContainer .goog-slider-horizontal{
    /*background-color: #33cc33;*/
    background-image: url("../img/audioplayer/k4-player-timeline.png");
    width: 474px;
    height: 7px;
    background-repeat: no-repeat;
    /*background-color: #ea7d0b;*/
    position: relative;
    /*top: 25px;*/
    /*height: 16px;*/
    /*width: 100%;*/

    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

.goog-slider {
    cursor:pointer;
}

.goog-slider-disabled {
    cursor:default;
}

.timelineContainer .goog-slider-horizontal .goog-slider-thumb {
    /*top: 0;*/
    width: 18px;
    /*height: 100%;*/
    height: 18px;
    background-repeat: no-repeat;

    /*position: absolute;*/
    position: relative;
    /*background-image: url("../img/audioplayer/record_16_16.png");*/
    /*background-color: #000;*/
    /*overflow: hidden;*/
    overflow: visible;

    background-image: url("../img/audioplayer/k4-player-timeline-drager.png");
}

.timelineContainer .goog-slider-horizontal .goog-slider-thumb:hover {
    background-image: url("../img/audioplayer/k4-player-timeline-drager-hover.png");
}


.goog-container-horizontal {
    display: inline-block;
}


.unselectable{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -user-select: none;
}

.goog-tooltip{
    /*background: #ccc;*/
    background-color: white;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    padding-left: 1px;
    padding-right: 1px;
    font-family: Verdana,Arial,sans-serif;
    /*font-size: 0.8em;*/

}

.rotatingRecordDiv{
    /*    width: 128px;
        height: 128px;*/
    padding-left: 190px;
    padding-right: 190px;
}

.html5ErrorDiv{
    display: inline-block;
    width:520px;
    white-space: normal;
}

.playlist{
    padding: 2px;
    width: 500px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    margin:10px;
    vertical-align: middle;
}

.playlistShown{
    display: block;   
}

.playlistHidden{
    display: none;
}


.playlistHeader{
    text-align: center;
}

.playlistBtnItemDown{
    width: 25px;
    height: 22px;
    margin-left: 3px;
    margin-right: 3px;
    display: inline-block;
    background-image: url("../img/audioplayer/k4-player-down.png");
}

.playlistBtnItemDown:hover{
    background-image: url("../img/audioplayer/k4-player-down-hover.png");
}

.playlistBtnItemUp{
    width: 25px;
    height: 22px;
    margin-left: 3px;
    margin-right: 3px;
    display: inline-block;
    background-image: url("../img/audioplayer/k4-player-up.png");
}

.playlistBtnItemUp:hover{
    background-image: url("../img/audioplayer/k4-player-up-hover.png");
}

.playlistItem{
    font-family: Verdana,Arial,sans-serif;
    font-size: 0.8em;

    border-width: 1px;
    border-bottom-style: solid;
    border-top-style: solid;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;

    background-color: lightgrey;
    text-align: right;
    padding: 3px;

    vertical-align: central;
    cursor: default;
}


/*aktivní položka - hraje, má pausu, ...*/
.playlistItemActive{
    background-color: #ee7c00;
}

/*vybraná položka - může se pohybovat v playlistu nahoru, dolů*/
.playlistItemSelected{
    font-weight: bold;
}

.playlistItemTitle {
    /*margin: 4px;*/
    /*background-color: #fedd1e;*/
    width: 420px;
    height: 16px;
    display: inline-block;
    /*background-color: #ccc;*/
    text-align: left;
    padding-left: 5px;
    /*cursor:pointer;*/
    /*vertical-align: central;*/
    margin-left: 5px;
    margin-right: 10px;
    text-align: left;
}

.playlistItemLength{
    display: inline-block;
    /*background-color: yellow;*/
    margin: 3px;
    /*margin-bottom: 10px;*/

    /*    vertical-align: central;*/
    text-align: right;
}

.playlistBtnItemRemove {
    display: inline-block;
    vertical-align: central;
    margin-top: 3px;
    margin-right: 5px;
    margin-left: 5px;
    background-image: url("../img/audioplayer/k4-player-delete.png");
    width: 13px;
    height: 13px;
}

.playlistBtnItemRemove:hover {
    background-image: url("../img/audioplayer/k4-player-delete-hover.png");
}



